<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>Woxy - 立即开启网页开发之旅</title>
    <link href="favicon.ico" rel="shortcut icon">
    <meta name="theme-color" content="#ffffff" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="一个简洁美观的图形化工具">
    <meta name="keywords" content="网页开发,图形化,blockly,积木编程,编辑器,woxy,网页开发助手">
    <meta name="author" content="Woxy Team">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="Woxy" />
    <meta name="apple-mobile-web-app-title" content="Woxy" />

    <!-- 原有脚本和样式 -->
    <script src="./js/blockly.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/sweetalert.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./js/jquery.growl.js" type="text/javascript"></script>
    <link href="./css/jquery.growl.css" rel="stylesheet" type="text/css" />
    <script src="./js/format/standalone.js"></script>
    <script src="./js/format/plugins/html.js"></script>
    <script src="./js/sober_style.js"></script>
    <script src="./js/intro.js"></script>
    <link href="./css/intro.css" rel="stylesheet" />
    <script src="./js/html2canvas.js"></script>
    <link rel="stylesheet" href="https://static.codemao.cn/pickduck/rykwtwKsA.css?hash=FnOA4R-uAmCtLkbSimn8d65lAYl4">
    <link id="prism-theme" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css"
        rel="stylesheet" />
    <script src="./js/screen.js"></script>
    <script src="./js/icon.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/f12.js"></script>
    <script src="./js/crypto.js"></script>

    <!-- 新添加的样式 -->
    <link href="./css/editor.css" rel="stylesheet" />
    <link href="./css/main.css" rel="stylesheet" />

    <!-- 工作区相关脚本 -->
    <script src="./blocks/msg.js"></script>
    <script src="./blocks/get.js"></script>
    <script src="./blocks/get.js.js"></script>
    <script src="./blocks/workspace.js"></script>

    <script>
        $(document).ready(function () {
            var timer = setInterval(function () {
                $("#start_page").slideUp(500);
            }, 200);
        });
    </script>
</head>

<body>
    <div data-intro="欢迎来到 Woxy 编辑器！您可以加入我们的 QQ 群：135452025" data-title="欢迎！"></div>

    <!-- 主题选择对话框 -->
    <div id="box-parent"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
        <div
            style="background: white; padding: 24px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); max-width: 300px;">
            <p style="font-size: 24px; margin: 0 0 20px 0; font-weight: 900;">主题皮肤切换</p>
            <hr style="margin: 16px 0;">

            <div class="theme-selector" onclick="setTheme('#2196f3')">
                天蓝色 - <span class="theme-blue"></span>
            </div>

            <div class="theme-selector" onclick="setTheme('#6d50f0')">
                深紫色 - <span class="theme-purple"></span>
            </div>

            <div class="theme-selector" onclick="setTheme('#494949')">
                深黑色 - <span class="theme-black"></span>
            </div>

            <hr style="margin: 16px 0;">
            <p style="font-size: 14px; color: #666;">请选择颜色，点击后将自动切换并关闭此窗口</p>
        </div>
    </div>

    <!-- 导入/导出对话框 -->
    <dialog id="dialog1" class="native-dialog">
        <div class="dialog-header">导入 / 导出</div>
        <div class="dialog-content">
            <p>此功能用于积木数据操作，点击右下角的按钮"关闭"关闭对话框</p>

            <div class="form-group">
                <label class="form-label">积木数据</label>
                <textarea id="data" class="form-control" style="min-height: 104px; max-height: 188px;"
                    placeholder="请输入积木数据"></textarea>
            </div>

            <div style="margin-bottom: 16px;">
                <button class="btn btn-primary" id="a" style="margin-right: 8px;">导入积木</button>
                <label for="importFile" class="btn btn-outlined">选择作品文件</label>
                <input id="importFile" accept=".json" type="file" style="display: none;">
            </div>

            <div class="divider"></div>

            <div class="form-group">
                <label class="form-label">积木数据</label>
                <input id="json" class="form-control" disabled placeholder="请先导出积木">
            </div>

            <button class="btn btn-primary" id="b">导出积木</button>
        </div>
        <div class="dialog-actions">
            <button class="btn btn-text" onclick="document.getElementById('dialog1').close()">关闭</button>
        </div>
    </dialog>

    <!-- 开始页面 -->
    <div id="start_page">
        <h1>Woxy</h1>
        <h3 id="text"></h3>
    </div>

    <!-- 导航栏 -->
    <header class="navbar" data-intro="这是导航栏，可使用丰富的功能，建议自行探索" data-title="导航栏">
        <div style="background: none;">
            <ul style="display: flex; align-items: center; margin: 0; padding: 0; list-style: none;">
                <li style="display: flex; align-items: center;">
                    <img src="./image/logo_new.png" width="30px" height="30px"
                        style="margin-left: 2px; margin-right: 10px;">
                </li>
                <li><b style="margin-right: 10px;">Woxy</b></li>

                <!-- 代码下拉菜单 -->
                <li class="dropdown">
                    <button class="dropdown-toggle" onclick="toggleDropdown(this)">代码</button>
                    <div class="dropdown-menu">
                        <a href="javascript:void(0)" class="dropdown-item" id="code_open">
                            <svg class="icon" xmlns='http://www.w3.org/2000/svg' width='24' height='24'
                                viewBox='0 0 24 24'>
                                <title>生成代码</title>
                                <g id="code_line" fill='none'>
                                    <path d='M0 0h24v24H0z' />
                                    <path fill='currentColor'
                                        d='M14.486 3.143a1 1 0 0 1 .692 1.233l-4.43 15.788a1 1 0 0 1-1.926-.54l4.43-15.788a1 1 0 0 1 1.234-.693M7.207 7.05a1 1 0 0 1 0 1.414L3.672 12l3.535 3.535a1 1 0 1 1-1.414 1.415L1.55 12.707a1 1 0 0 1 0-1.414L5.793 7.05a1 1 0 0 1 1.414 0m9.586 1.414a1 1 0 1 1 1.414-1.414l4.243 4.243a1 1 0 0 1 0 1.414l-4.243 4.243a1 1 0 0 1-1.414-1.415L20.328 12z' />
                                </g>
                            </svg>
                            生成代码
                        </a>
                        <a href="javascript:void(0)" class="dropdown-item" id="copycode">
                            <svg class="icon" xmlns='http://www.w3.org/2000/svg' width='24' height='24'
                                viewBox='0 0 24 24'>
                                <title>复制代码</title>
                                <g id="copy_2_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M9 2a2 2 0 0 0-2 2v2h2V4h11v11h-2v2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm0 2h11v11H4z' />
                                </g>
                            </svg>
                            复制代码
                        </a>
                        <a href="javascript:void(0)" class="dropdown-item"
                            onclick="document.getElementById('dialog1').showModal()">
                            <svg class="icon" style="transform: scale(1.15);" xmlns='http://www.w3.org/2000/svg'
                                width='24' height='24' viewBox='0 0 24 24'>
                                <title>导入或导出作品</title>
                                <g id="transfer_2_line" fill='none' fill-rule='nonzero'>
                                    <path
                                        d='M24 0v24H0V0h24ZM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01-.184-.092Z' />
                                    <path fill='currentColor'
                                        d='M8.122 3.464c.665-.666 1.784-.24 1.872.662l.006.115V20a1 1 0 0 1-1.993.117L8 20V6.414L5.707 8.707a1 1 0 0 1-1.497-1.32l.083-.094 3.83-3.83ZM15 3a1 1 0 0 1 .993.883L16 4v13.586l2.293-2.293a1 1 0 0 1 1.497 1.32l-.083.094-3.83 3.83c-.664.665-1.783.239-1.871-.663L14 19.759V4a1 1 0 0 1 1-1Z' />
                                </g>
                            </svg>
                            导入导出
                        </a>
                        <a href="javascript:void(0)" class="dropdown-item"
                            onclick="document.getElementById('dialog2').showModal(); loadworklist();">
                            <svg class="icon" style="transform: scale(1.15) translateY(-1px) translateX(1px);"
                                xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
                                <title>作品模板</title>
                                <g id="layers_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M12.01 2.378a2.5 2.5 0 0 1 2.985 2.29l.005.161v.551c1.503-.3 2.9.792 2.995 2.288l.005.161v.55c1.503-.3 2.9.793 2.995 2.289l.005.162v6.53a3 3 0 0 1-2.239 2.902l-.173.04-6.598 1.32a2.5 2.5 0 0 1-2.985-2.29L9 19.17v-.55l-.01.002a2.5 2.5 0 0 1-2.985-2.29L6 16.17v-.55l-.01.002a2.5 2.5 0 0 1-2.985-2.29L3 13.17V6.64a3 3 0 0 1 2.238-2.902l.174-.04zm6.392 7.961-6.598 1.32a1 1 0 0 0-.804.98v6.531a.5.5 0 0 0 .598.49l6.598-1.32a1 1 0 0 0 .804-.98v-6.53a.5.5 0 0 0-.598-.49m-3-3L8.804 8.66a1 1 0 0 0-.804.98v6.531a.5.5 0 0 0 .598.49L9 16.58v-3.94a3 3 0 0 1 2.412-2.942L16 8.78v-.95a.5.5 0 0 0-.598-.49m-3-3L5.804 5.66a1 1 0 0 0-.804.98v6.531a.5.5 0 0 0 .598.49L6 13.58V9.64a3 3 0 0 1 2.412-2.942L13 5.78v-.95a.5.5 0 0 0-.598-.49' />
                                </g>
                            </svg>
                            模板作品
                        </a>
                    </div>
                </li>

                <!-- 主题下拉菜单 -->
                <li class="dropdown">
                    <button class="dropdown-toggle" onclick="toggleDropdown(this)">主题</button>
                    <div class="dropdown-menu">
                        <a style="display: none; pointer-events: none; color: rgba(255, 255, 255, 0.432) !important;" href="javascript:void(0)" class="dropdown-item"
                            onclick='$("#box-parent").css("display","flex");'>
                            <svg style="transform: scale(1.1) translateX(1px);" class="icon"
                                xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
                                <title>主题设置</title>
                                <g id="palette_line" fill='none'>
                                    <path
                                        d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M12 2c5.523 0 10 4.477 10 10 0 .649-.062 1.284-.18 1.9-.386 2.004-2.397 2.85-4.082 2.57l-1.74-.29a1.29 1.29 0 0 0-1.124.36c-.37.37-.547.879-.298 1.376.423.846.429 1.812.055 2.603C14.131 21.58 13.11 22 12 22 6.477 22 2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16l.195-.002c.258-.01.5-.06.628-.332a.993.993 0 0 0-.036-.855c-.63-1.262-.302-2.71.673-3.685a3.29 3.29 0 0 1 2.867-.919l1.74.29c.957.16 1.668-.348 1.789-.975A8 8 0 0 0 12 4m-4.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m7-4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m-5 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3' />
                                </g>
                            </svg>

                            主题设置
                        </a>
                        <a href="javascript:void(0)" class="dropdown-item" onclick="moon()">
                            <svg style="transform: scale(1.2) translateY(-1px) translateX(1px);" class="icon"
                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <title>深色模式切换</title>
                                <g id="moon_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.10-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M13.574 3.137a1.01 1.01 0 0 0-1.097 1.409 6 6 0 0 1-7.931 7.931 1.01 1.01 0 0 0-1.409 1.097A9 9 0 0 0 21 12c0-4.434-3.206-8.118-7.426-8.863m1.307 2.481A7.002 7.002 0 0 1 12 19a7.002 7.002 0 0 1-6.382-4.12 8 8 0 0 0 9.263-9.263Z' />
                                </g>
                            </svg> 深色模式
                        </a>
                    
                    </div>
                </li>

                <!-- 其他下拉菜单 -->
                <li class="dropdown">
                    <button class="dropdown-toggle" onclick="toggleDropdown(this)">其他</button>
                    <div class="dropdown-menu">

                        <a href="javascript:void(0)" class="dropdown-item" id="take-photo">
                            <svg style="transform: scale(1.1);" xmlns='http://www.w3.org/2000/svg' width='24'
                                height='24' viewBox='0 0 24 24'>
                                <title>拍照保存</title>
                                <g id="camera_2_ai_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M20 2a1 1 0 0 1 .946.677l.13.378a3 3 0 0 0 1.869 1.87l.378.129a1 1 0 0 1 0 1.892l-.378.13a3 3 0 0 0-1.87 1.869l-.129.378a1 1 0 0 1-1.892 0l-.13-.378a3 3 0 0 0-1.869-1.87l-.378-.129a1 1 0 0 1 0-1.892l.378-.13a3 3 0 0 0 1.87-1.869l.129-.378A1 1 0 0 1 20 2m0 3.196a5.006 5.006 0 0 1-.804.804c.298.236.567.506.804.804.236-.298.506-.568.804-.804A5.006 5.006 0 0 1 20 5.196M8 3.586A2 2 0 0 1 9.414 3H14a1 1 0 1 1 0 2H9.414L8 6.414A2 2 0 0 1 6.586 7H4v12h16v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2.586zM9 12.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-5a5 5 0 1 0 0 10 5 5 0 0 0 0-10' />
                                </g>
                            </svg>
                            拍照保存
                        </a>
                        <a href="javascript:void(0)" class="dropdown-item" onclick="intro()">
                            <svg style="transform: scale(1.2) translateY(-1px);" xmlns='http://www.w3.org/2000/svg'
                                width='24' height='24' viewBox='0 0 24 24'>
                                <title>flag_1_line</title>
                                <g id="flag_1_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M6 3a2 2 0 0 0-2 2v16a1 1 0 1 0 2 0v-5h13.804a1.1 1.1 0 0 0 .89-1.747L17.236 9.5l3.456-4.753A1.1 1.1 0 0 0 19.803 3zm0 11V5h12.036l-2.63 3.618a1.5 1.5 0 0 0 0 1.764L18.035 14z' />
                                </g>
                            </svg>
                            新手指引
                        </a>
                        <a href="index.html" class="dropdown-item">
                            <svg style="transform: scale(1.1);" xmlns='http://www.w3.org/2000/svg' width='24'
                                height='24' viewBox='0 0 24 24'>
                                <title>官方网站</title>
                                <g id="earth_2_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m1.482 14.94a18.214 18.214 0 0 1-2.964 0c.093.397.197.765.31 1.102.251.755.53 1.293.79 1.622.127.162.23.248.3.29l.051.028.03.008.032-.008.051-.027a1.21 1.21 0 0 0 .3-.29c.26-.33.539-.868.79-1.623.113-.337.217-.705.31-1.102m-8.675-1.435a8.026 8.026 0 0 0 4.441 4.01 10.52 10.52 0 0 1-.318-.84 15.818 15.818 0 0 1-.52-2.033 17.87 17.87 0 0 1-3.603-1.137m14.387 0c-1.145.5-2.351.883-3.605 1.137a15.63 15.63 0 0 1-.52 2.034c-.096.29-.202.572-.318.838a8.027 8.027 0 0 0 4.443-4.01Zm-5.218-4.634a15.119 15.119 0 0 1-3.952 0 26.02 26.02 0 0 0 .141 4.025 16.195 16.195 0 0 0 3.67 0A25.04 25.04 0 0 0 14 12c0-.384-.008-.76-.024-1.13ZM4.568 9.032a7.978 7.978 0 0 0-.52 3.856 15.893 15.893 0 0 0 4.067 1.637 27.889 27.889 0 0 1-.074-4.053 14.915 14.915 0 0 1-3.473-1.44m14.864 0a14.916 14.916 0 0 1-3.473 1.44 27.879 27.879 0 0 1-.074 4.053 15.892 15.892 0 0 0 4.066-1.637 7.978 7.978 0 0 0-.52-3.855Zm-7.416-5.02-.011-.002-.02.003-.038.015a1.233 1.233 0 0 0-.33.307c-.26.33-.538.868-.79 1.622-.27.808-.488 1.8-.633 2.919a13.123 13.123 0 0 0 3.612 0c-.145-1.12-.364-2.111-.633-2.919-.252-.754-.53-1.293-.79-1.622a1.233 1.233 0 0 0-.3-.29l-.067-.032Zm-2.768.474a8.022 8.022 0 0 0-3.71 2.797c.843.484 1.746.876 2.695 1.163.16-1.164.397-2.223.697-3.122.097-.291.203-.572.318-.838m5.504 0c.115.266.22.547.318.838.3.9.537 1.958.697 3.122a12.927 12.927 0 0 0 2.695-1.163 8.021 8.021 0 0 0-3.71-2.797' />
                                </g>
                            </svg>
                            官方网站
                        </a>
                    </div>
                </li>

                <!-- 打包下拉菜单 -->
                <li class="dropdown">
                    <button class="dropdown-toggle" onclick="toggleDropdown(this)">打包</button>
                    <div class="dropdown-menu">
                        <a href="javascript:void(0)" class="dropdown-item" onclick='$("#g-apk").css("display","flex");'>
                            <svg style="transform: scale(1.2);" xmlns='http://www.w3.org/2000/svg' width='24'
                                height='24' viewBox='0 0 24 24'>
                                <title>安卓打包</title>
                                <g id="package_2_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M12.25 4.299a.5.5 0 0 0-.5 0L6.206 7.5l1.813 1.047 5.798-3.343zm3.568 2.06L10.02 9.702l1.73.999a.5.5 0 0 0 .5 0L17.794 7.5l-1.976-1.14Zm2.976 2.873-5.544 3.201a2.25 2.25 0 0 1-.25.126v6.709l5.544-3.201a.5.5 0 0 0 .25-.433zM11 19.268v-6.709a2.5 2.5 0 0 1-.25-.126L5.206 9.232v6.402a.5.5 0 0 0 .25.433zm-.25-16.701a2.5 2.5 0 0 1 2.5 0l6.294 3.634a2.5 2.5 0 0 1 1.25 2.165v7.268a2.5 2.5 0 0 1-1.25 2.165l-6.294 3.634a2.5 2.5 0 0 1-2.5 0l-6.294-3.634a2.5 2.5 0 0 1-1.25-2.165V8.366a2.5 2.5 0 0 1 1.25-2.165z' />
                                </g>
                            </svg>
                            安卓打包
                        </a>
                    </div>
                </li>

                <!-- 云作品下拉菜单 -->
                <li class="dropdown" id="cloud1">
                    <button class="dropdown-toggle" onclick="toggleDropdown(this)">云作品</button>
                    <div class="dropdown-menu">
                        <a href="javascript:void(0)" class="dropdown-item" onclick="upd();">
                            <svg style="transform: scale(1.1);" xmlns='http://www.w3.org/2000/svg' width='24'
                                height='24' viewBox='0 0 24 24'>
                                <title>保存作品</title>
                                <g id="save_2_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M15.586 3A2 2 0 0 1 17 3.586L19.414 6A2 2 0 0 1 20 7.414V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8 5H5v14h2v-5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v5h2V7.414L15.586 5H15v2.5A1.5 1.5 0 0 1 13.5 9h-4A1.5 1.5 0 0 1 8 7.5zm6 9H9v5h5zm-1-9h-3v2h3z' />
                                </g>
                            </svg>
                            保存作品
                        </a>
                        <a href="javascript:void(0)" class="dropdown-item"
                            onclick="document.getElementById('dialog').showModal(); loadworklist();">
                            <svg style="transform: scale(1.15) translateY(-1px);" xmlns='http://www.w3.org/2000/svg'
                                width='24' height='24' viewBox='0 0 24 24'>
                                <title>user_4_line</title>
                                <g id="user_4_line" fill='none' fill-rule='evenodd'>
                                    <path
                                        d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z' />
                                    <path fill='currentColor'
                                        d='M12 2c5.523 0 10 4.477 10 10a9.959 9.959 0 0 1-2.258 6.33l.02.022-.132.112A9.978 9.978 0 0 1 12 22c-2.95 0-5.6-1.277-7.43-3.307l-.2-.23-.132-.11.02-.024A9.958 9.958 0 0 1 2 12C2 6.477 6.477 2 12 2m0 15c-1.86 0-3.541.592-4.793 1.406A7.965 7.965 0 0 0 12 20a7.965 7.965 0 0 0 4.793-1.594A8.897 8.897 0 0 0 12 17m0-13a8 8 0 0 0-6.258 12.984C7.363 15.821 9.575 15 12 15s4.637.821 6.258 1.984A8 8 0 0 0 12 4m0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4' />
                                </g>
                            </svg>
                            我的作品
                        </a>
                    </div>
                </li>

                <li style="position: absolute; right: 1%;">
                    <a href="/user_system/" style="text-decoration: none; display: flex; align-items: center;">
                        <svg viewBox="0 0 1028 1024" width="32" height="32" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M815.814506 299.350645c0 165.306834-134.011812 299.350645-299.350645 299.350645s-299.350645-134.011812-299.350645-299.350645c0-165.306834 134.011812-299.350645 299.350645-299.350645s299.350645 134.011812 299.350645 299.350645z"
                                fill="currentColor" />
                            <path
                                d="M763.52814 612.780851c-69.75782 55.070279-156.219118 85.661323-247.064279 85.661323-91.901128 0-179.1944-31.295022-249.27221-87.421268-184.698228 67.805881-267.19165 304.758476-267.19165 412.979094l1027.711884 0c0-107.260648-83.133402-342.549295-264.183744-411.18715z"
                                fill="currentColor" />
                        </svg>
                        <p style="display: inline-block; margin-left: 10px;  font-size: 16px;"
                            id="username">未登录</p>
                    </a>
                </li>

                <li style="margin-left: 16px;">
                    <button class="btn" id="runcode" onclick="runcode();"
                        style="background-color: #3395FE !important; color: white; font-size: 12px; border-radius: 12px; height: 29px; padding: 0 12px; display: flex; align-items: center;">
                        <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                            style="margin-right: 4px; margin-bottom: 0;">
                            <path
                                d="M385.237333 228.266667l350.933334 210.56c55.253333 33.152 55.253333 113.194667 0 146.346666L385.28 795.733333c-40.789333 24.490667-89.6 10.325333-113.92-24.149333l-0.042667 0.042667a42.666667 42.666667 0 1 0-73.216 43.946666l-0.085333 0.042667c47.36 72.533333 147.626667 103.424 231.168 53.333333l350.933333-210.602666c110.506667-66.304 110.506667-226.389333 0-292.693334l-350.933333-210.56C315.392 86.826667 170.666667 168.746667 170.666667 301.44V640a42.666667 42.666667 0 1 0 85.333333 0V301.44C256 235.093333 328.362667 194.133333 385.237333 228.266667z"
                                fill="currentColor" />
                        </svg>
                        运行代码
                    </button>
                </li>
            </ul>
        </div>
    </header>

    <!-- 模板作品对话框 -->
    <dialog id="dialog2" class="native-dialog" style="width: 90vw; max-width: 1200px;">
        <div class="dialog-header">作品展示</div>
        <div class="dialog-content">
            <div class="divider"></div>
            <div class="grid">
                <a href="javascript:loadexample(1)" style="text-decoration: none;">
                    <div class="card">
                        <img src="/image/work_cover.webp" alt="你好世界" class="card-img-top">
                        <div class="card-body">
                            <h3 class="card-title">你好世界</h3>
                            <p class="card-subtitle">开启网页创作之旅</p>
                        </div>
                    </div>
                </a>

                <a href="javascript:loadexample(2)" style="text-decoration: none;">
                    <div class="card">
                        <img src="/image/work_cover.webp" alt="计算器" class="card-img-top">
                        <div class="card-body">
                            <h3 class="card-title">计算器</h3>
                            <p class="card-subtitle">计算加减乘除乘方</p>
                        </div>
                    </div>
                </a>

                <a href="javascript:loadexample(3)" style="text-decoration: none;">
                    <div class="card">
                        <img src="/image/work_cover.webp" alt="工具导航" class="card-img-top">
                        <div class="card-body">
                            <h3 class="card-title">工具导航</h3>
                            <p class="card-subtitle">实用的常用网页导航站</p>
                        </div>
                    </div>
                </a>

                <a href="javascript:loadexample(4)" style="text-decoration: none;">
                    <div class="card">
                        <img src="/image/work_cover.webp" alt="斐波那契数列" class="card-img-top">
                        <div class="card-body">
                            <h3 class="card-title">斐波那契数列</h3>
                            <p class="card-subtitle">计算数列第n项</p>
                        </div>
                    </div>
                </a>

                <a href="javascript:loadexample(5)" style="text-decoration: none;">
                    <div class="card">
                        <img src="/image/work_cover.webp" alt="阶乘" class="card-img-top">
                        <div class="card-body">
                            <h3 class="card-title">阶乘</h3>
                            <p class="card-subtitle">计算阶乘</p>
                        </div>
                    </div>
                </a>

                <a href="javascript:loadexample(6)" style="text-decoration: none;">
                    <div class="card">
                        <img src="/image/work_cover.webp" alt="计算累加和" class="card-img-top">
                        <div class="card-body">
                            <h3 class="card-title">计算累加和</h3>
                            <p class="card-subtitle">计算1+2+...+n的总和</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="dialog-actions">
            <button class="btn btn-text" onclick="document.getElementById('dialog2').close()">退出</button>
        </div>
    </dialog>

    <!-- 我的作品对话框 -->
    <dialog id="dialog" class="native-dialog" style="width: 90vw; max-width: 1200px;">
        <div class="dialog-header">作品</div>
        <div class="dialog-content">
            <div style="margin-bottom: 16px;">
                <button class="nav-tab active">我的作品</button>
            </div>
            <div class="divider"></div>
            <div class="grid" id="worklist">
                <!-- 作品列表将通过JavaScript动态加载 -->
            </div>
        </div>
        <div class="dialog-actions">
            <button class="btn btn-text" onclick="document.getElementById('dialog').close()">退出</button>
        </div>
    </dialog>

    <!-- 安卓打包对话框 -->
    <div id="g-apk">
        <div id="g-apk-child">
            <h2 style="text-align: start; margin-top: 0;">安卓打包</h2>
            <p style="margin-top: 0;">请输入应用名称并选择图标</p>
            <div style="margin: 15px 0;">
                <input type="text" id="app_name" placeholder="请输入应用名称" class="datainput">
            </div>
            <div style="margin: 15px 0;">
                <input type="file" id="app_icon" accept="image/*" style="display: none;">
                <label for="app_icon" style="border: 1px dashed #cccccc; padding: 20px; display: block; text-align: center; cursor: pointer;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
                        <polyline points="21 15 16 10 5 21"></polyline>
                    </svg>
                    <br>
                    点击选择应用图标
                </label>
            </div>
            <div style="display: flex; justify-content: center; margin-top: 20px;">
                <button class="btn" id="apk_g" style="background-color: #3395FE; color: white; padding: 8px 20px;">开始打包</button>
                <button class="btn" onclick="$('#g-apk').css('display','none');" style="margin-left: 10px; padding: 8px 20px;">取消</button>
            </div>
        </div>
    </div>

    <!-- 代码显示区域 -->
    <div id="code"
        style="display: none; position: fixed; top: 60px; left: 0; width: 100%; height: calc(100% - 45px); background-color: #1D1F21; color: white; overflow: scroll; padding: 14px; z-index: 999; font-family: consola, serif;">
        <pre style="background: none;" class="line-numbers"><code id="code-content" class="language-html"></code></pre>
    </div>

    <!-- 运行遮罩 -->
    <div id="mask" onclick="runcode();"
        style="display: none; position: fixed; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; flex-direction: column; align-items: center; justify-content: center;">
        <svg style="margin-bottom: 8px;" width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M18.2838 43.1713C14.9327 42.1736 11.9498 40.3213 9.58787 37.867C10.469 36.8227 11 35.4734 11 34.0001C11 30.6864 8.31371 28.0001 5 28.0001C4.79955 28.0001 4.60139 28.01 4.40599 28.0292C4.13979 26.7277 4 25.3803 4 24.0001C4 21.9095 4.32077 19.8938 4.91579 17.9995C4.94381 17.9999 4.97188 18.0001 5 18.0001C8.31371 18.0001 11 15.3138 11 12.0001C11 11.0488 10.7786 10.1493 10.3846 9.35011C12.6975 7.1995 15.5205 5.59002 18.6521 4.72314C19.6444 6.66819 21.6667 8.00013 24 8.00013C26.3333 8.00013 28.3556 6.66819 29.3479 4.72314C32.4795 5.59002 35.3025 7.1995 37.6154 9.35011C37.2214 10.1493 37 11.0488 37 12.0001C37 15.3138 39.6863 18.0001 43 18.0001C43.0281 18.0001 43.0562 17.9999 43.0842 17.9995C43.6792 19.8938 44 21.9095 44 24.0001C44 25.3803 43.8602 26.7277 43.594 28.0292C43.3986 28.01 43.2005 28.0001 43 28.0001C39.6863 28.0001 37 30.6864 37 34.0001C37 35.4734 37.531 36.8227 38.4121 37.867C36.0502 40.3213 33.0673 42.1736 29.7162 43.1713C28.9428 40.752 26.676 39.0001 24 39.0001C21.324 39.0001 19.0572 40.752 18.2838 43.1713Z"
                fill="none" stroke="#ffffff" stroke-width="4" />
            <path
                d="M24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z"
                fill="none" stroke="#ffffff" stroke-width="4" />
        </svg>
        <p style="color: white; font-size: 32px; margin: 0 0 10px 0; font-weight: bold;">正在运行</p>
        <p style="color: white; font-size: 18px; margin: 0;">点击此处结束运行</p>
    </div>


    <!-- 工作区 -->
    <div id="blocklyDiv" data-intro="这是工作区，可拖拽积木，制作网页" data-title="工作区" style="z-index: 1;">
        <xml id="toolbox" style="display: none" xmlns="https://developers.google.com/blockly/xml">
            <category name="页面框架" categorystyle="mind-mapping">
                <block type="go">
                    <field name="title">hello</field>
                    <field name="unicode">utf-8</field>
                </block>
                <block type="end"></block>
            </category>
            <sep></sep>
            <category name="文本内容" categorystyle="tag">
                <block type="h1">
                    <field name="text">标题1</field>
                    <field name="id">id</field>
                </block>
                <block type="h2">
                    <field name="text">标题2</field>
                    <field name="id">id</field>
                </block>
                <block type="h3">
                    <field name="text">标题3</field>
                    <field name="id">id</field>
                </block>
                <block type="p">
                    <field name="text">段落文字</field>
                    <field name="id">id</field>
                </block>
                <block type="p_xy">
                    <field name="text">段落文字</field>
                    <field name="id">id</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="div">
                    <field name="id">id</field>
                    <field name="color">white</field>
                </block>
                <block type="div_xy">
                    <field name="id">id</field>
                    <field name="color">white</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="link">
                    <field name="text">百度</field>
                    <field name="link">https://baidu.com</field>
                </block>
                <block type="link_xy">
                    <field name="text">百度</field>
                    <field name="link">https://baidu.com</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="image">
                    <field name="img">a.png</field>
                    <field name="height">100</field>
                    <field name="width">100</field>
                </block>
                <block type="image_xy">
                    <field name="img">a.png</field>
                    <field name="height">100</field>
                    <field name="width">100</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="ul">
                    <field name="id">id</field>
                </block>
                <block type="ul_xy">
                    <field name="id">id</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="ol">
                    <field name="id">id</field>
                </block>
                <block type="ol_xy">
                    <field name="id">id</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="li">
                    <field name="text">列表项</field>
                    <field name="id">id</field>
                </block>
                <block type="table">
                    <field name="id">id</field>
                </block>
                <block type="table_xy">
                    <field name="id">id</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="tr_head">
                    <field name="id">id</field>
                </block>
                <block type="tr">
                    <field name="id">id</field>
                </block>
                <block type="th">
                    <field name="text">表头</field>
                    <field name="id">id</field>
                </block>
                <block type="td">
                    <field name="text">单元格</field>
                    <field name="id">id</field>
                </block>
            </category>
            <sep></sep>
            <category name="交互组件" categorystyle="switch-button">
                <block type="button">
                    <field name="text">按钮</field>
                    <field name="link">https://example.com</field>
                </block>
                <block type="button_xy">
                    <field name="text">按钮</field>
                    <field name="link">https://example.com</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="input">
                    <field name="id">input1</field>
                    <field name="type">text</field>
                </block>
                <block type="input_xy">
                    <field name="id">input1</field>
                    <field name="type">text</field>
                    <field name="x">10</field>
                    <field name="y">10</field>
                </block>
                <block type="click">
                    <field name="id">a</field>
                    <field name="type">click</field>
                </block>
                <block type="on_input">
                    <field name="id">a</field>
                </block>
                <block type="on_key">
                    <field name="id">a</field>
                    <field name="etype">keydown</field>
                </block>
                <block type="on_focus">
                    <field name="id">a</field>
                    <field name="etype">focus</field>
                </block>
            </category>
            <sep></sep>
            <category name="样式布局" categorystyle="text-style-one">
                <block type="style">
                    <field name="who">a</field>
                </block>
                <block type="style_hover">
                    <field name="who">a</field>
                </block>
                <block type="display">
                    <field name="type">block</field>
                </block>
                <block type="flex_direction">
                    <field name="zhuzou">row</field>
                </block>
                <block type="flex_justify_content">
                    <field name="type">center</field>
                </block>
                <block type="flex_align_items">
                    <field name="type">center</field>
                </block>
                <block type="text_color">
                    <field name="color">red</field>
                </block>
                <block type="text_size">
                    <field name="size">16</field>
                </block>
                <block type="font_family">
                    <field name="family">Arial</field>
                </block>
                <block type="bg_color">
                    <field name="color">white</field>
                </block>
                <block type="margin">
                    <field name="value">10</field>
                </block>
                <block type="padding">
                    <field name="value">10</field>
                </block>
                <block type="border">
                    <field name="width">1</field>
                    <field name="style">solid</field>
                    <field name="color">black</field>
                </block>
                <block type="radius">
                    <field name="r">5</field>
                </block>
                <block type="shadow">
                    <field name="x">2</field>
                    <field name="y">2</field>
                    <field name="m">5</field>
                    <field name="c">gray</field>
                </block>
                <block type="css_width">
                    <field name="width">100</field>
                </block>
                <block type="css_height">
                    <field name="height">50</field>
                </block>
                <block type="position">
                    <field name="mode">relative</field>
                </block>
                <block type="z-index">
                    <field name="c">1</field>
                </block>
                <block type="overflow">
                    <field name="type">visible</field>
                </block>
            </category>
            <sep></sep>
            <category name="命令脚本" categorystyle="devices">
                <block type="js"></block>
                <block type="alert"></block>
                <block type="console_log">
                    <field name="text">调试信息</field>
                </block>
                <block type="changestyle">
                    <field name="id">a</field>
                    <field name="type">color</field>
                    <field name="value">red</field>
                </block>
                <block type="change_div_html">
                    <field name="id">a</field>
                </block>
                <block type="set_interval">
                    <field name="ms">1000</field>
                </block>
                <block type="set_timeout">
                    <field name="ms">1000</field>
                </block>
            </category>
            <sep></sep>
            <category name="变量" custom="VARIABLE" categorystyle="memory-one"></category>
            <sep></sep>
            <category name="数学逻辑" categorystyle="calculator">
                <block type="controls_if"></block>
                <block type="logic_compare"></block>
                <block type="logic_boolean"></block>
                <block type="logic_operation"></block>
                <block type="logic_negate"></block>
                <block type="controls_repeat_ext">
                    <value name="TIMES">
                        <shadow type="math_number">
                            <field name="NUM">10</field>
                        </shadow>
                    </value>
                </block>
                <block type="math_number">
                    <field name="NUM">0</field>
                </block>
                <block type="math_arithmetic">
                    <value name="A">
                        <shadow type="math_number">
                            <field name="NUM">1</field>
                        </shadow>
                    </value>
                    <value name="B">
                        <shadow type="math_number">
                            <field name="NUM">1</field>
                        </shadow>
                    </value>
                </block>
                <block type="text">
                    <field name="TEXT"></field>
                </block>
                <block type="text_join">
                    <mutation items="2"></mutation>
                    <value name="ADD0">
                        <shadow type="text">
                            <field name="TEXT"></field>
                        </shadow>
                    </value>
                    <value name="ADD1">
                        <shadow type="text">
                            <field name="TEXT"></field>
                        </shadow>
                    </value>
                </block>
            </category>
        </xml>
        <xml id="workspaceBlocks" xmlns="https://developers.google.com/blockly/xml"></xml>
    </div>


    <pre id="codefa" style="display: none;"><code class="language-html"></code></pre>
    <div id="look" data-intro="这是预览区，可实时查看网页效果，运行代码后可自由交互" data-title="预览区"><iframe id="look_html" height="100%"
            style="border: 0;"></iframe></div>

    <div id="look_pos"></div>
    <div style="margin-bottom: 8px; display: none;" id="code_list">
        <s-icon style="width: 18px; height: 18px;" href="javascript:void(0)" id="code_open">
            <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M305.4 21.8c-1.3-10.4-9.1-18.8-19.5-20C276.1 .6 266.1 0 256 0c-11.1 0-22.1 .7-32.8 2.1c-10.3 1.3-18 9.7-19.3 20l-2.9 23.1c-.8 6.4-5.4 11.6-11.5 13.7c-9.6 3.2-19 7.2-27.9 11.7c-5.8 3-12.8 2.5-18-1.5l-18-14c-8.2-6.4-19.7-6.8-27.9-.4c-16.6 13-31.5 28-44.4 44.7c-6.3 8.2-5.9 19.6 .5 27.8l14.2 18.3c4 5.1 4.4 12 1.5 17.8c-4.4 8.8-8.2 17.9-11.3 27.4c-2 6.2-7.3 10.8-13.7 11.6l-22.8 2.9c-10.3 1.3-18.7 9.1-20 19.4C.7 234.8 0 245.3 0 256c0 10.6 .6 21.1 1.9 31.4c1.3 10.3 9.7 18.1 20 19.4l22.8 2.9c6.4 .8 11.7 5.4 13.7 11.6c3.1 9.5 6.9 18.7 11.3 27.5c2.9 5.8 2.4 12.7-1.5 17.8L54 384.8c-6.4 8.2-6.8 19.6-.5 27.8c12.9 16.7 27.8 31.7 44.4 44.7c8.2 6.4 19.7 6 27.9-.4l18-14c5.1-4 12.2-4.4 18-1.5c9 4.6 18.3 8.5 27.9 11.7c6.1 2.1 10.7 7.3 11.5 13.7l2.9 23.1c1.3 10.3 9 18.7 19.3 20c10.7 1.4 21.7 2.1 32.8 2.1c10.1 0 20.1-.6 29.9-1.7c10.4-1.2 18.2-9.7 19.5-20l2.8-22.5c.8-6.5 5.5-11.8 11.7-13.8c10-3.2 19.7-7.2 29-11.8c5.8-2.9 12.7-2.4 17.8 1.5L385 457.9c8.2 6.4 19.6 6.8 27.8 .5c2.8-2.2 5.5-4.4 8.2-6.7L451.7 421c1.8-2.2 3.6-4.4 5.4-6.6c6.5-8.2 6-19.7-.4-27.9l-14-17.9c-4-5.1-4.4-12.2-1.5-18c4.8-9.4 9-19.3 12.3-29.5c2-6.2 7.3-10.8 13.7-11.6l22.8-2.8c10.3-1.3 18.8-9.1 20-19.4c.2-1.7 .4-3.5 .6-5.2V230.1c-.2-1.7-.4-3.5-.6-5.2c-1.3-10.3-9.7-18.1-20-19.4l-22.8-2.8c-6.4-.8-11.7-5.4-13.7-11.6c-3.4-10.2-7.5-20.1-12.3-29.5c-3-5.8-2.5-12.8 1.5-18l14-17.9c6.4-8.2 6.8-19.7 .4-27.9c-1.8-2.2-3.6-4.4-5.4-6.6L421 60.3c-2.7-2.3-5.4-4.5-8.2-6.7c-8.2-6.4-19.6-5.9-27.8 .5L366.7 68.3c-5.1 4-12.1 4.4-17.8 1.5c-9.3-4.6-19-8.6-29-11.8c-6.2-2-10.9-7.3-11.7-13.7l-2.8-22.5zM287.8 162.6l-32 192c-1.5 8.7-9.7 14.6-18.4 13.2s-14.6-9.7-13.2-18.4l32-192c1.5-8.7 9.7-14.6 18.4-13.2s14.6 9.7 13.2 18.4zM187.3 227.3L158.6 256l28.7 28.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0l-40-40c-6.2-6.2-6.2-16.4 0-22.6l40-40c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6zm160-22.6l40 40c6.2 6.2 6.2 16.4 0 22.6l-40 40c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L353.4 256l-28.7-28.7c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0z" />
            </svg>
        </s-icon>
        <a style="width: 18px; height: 18px;" id="copycode" href="javascript:void(0)">
            <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">

                <path
                    d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z" />
            </svg>
        </a>
    </div>

    <div class="blcokly-action-buttons">

        <div class="blcokly-action-buttons-item">
            <div class="blcokly-action-buttons-item-icon">
                <svg style="transform: translateX(0px);" xmlns='http://www.w3.org/2000/svg' width='20' height='20'
                    viewBox='0 0 24 24'>
                    <title>回到中心</title>
                    <g id="map_pin_line" fill='none' fill-rule='evenodd'>
                        <path
                            d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z' />
                        <path fill='currentColor'
                            d='M12 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6M7 7a5 5 0 1 1 6 4.9V17a1 1 0 1 1-2 0v-5.1A5.002 5.002 0 0 1 7 7m2.489 9.1a1 1 0 0 1-.838 1.14c-1.278.194-2.293.489-2.96.815-1.22.597.206 1.026.95 1.258C7.968 19.728 9.863 20 12 20s4.032-.272 5.359-.687c.749-.234 2.17-.66.95-1.258-.667-.326-1.682-.62-2.96-.815a1 1 0 1 1 .301-1.977c1.388.21 2.622.547 3.539.996.884.433 1.811 1.162 1.811 2.241 0 .811-.524 1.4-1.034 1.777C17.816 21.865 14.536 22 12 22c-2.282 0-4.387-.288-5.955-.778C4.795 20.832 3 20.062 3 18.5c0-1.08.927-1.808 1.811-2.24.917-.45 2.152-.786 3.538-.997a1 1 0 0 1 1.14.838Z' />
                    </g>
                </svg>
            </div>
            回中
        </div>

        <div class="blcokly-action-buttons-item">
            <div class="blcokly-action-buttons-item-icon">
                <svg style="transform: translateX(-0.5px);" xmlns='http://www.w3.org/2000/svg' width='20' height='20'
                    viewBox='0 0 24 24'>
                    <title>放大工作区</title>
                    <g id="add_line" fill='none'>
                        <path
                            d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z' />
                        <path fill='currentColor'
                            d='M11 20a1 1 0 1 0 2 0v-7h7a1 1 0 1 0 0-2h-7V4a1 1 0 1 0-2 0v7H4a1 1 0 1 0 0 2h7z' />
                    </g>
                </svg>
            </div>
            放大
        </div>


        <div class="blcokly-action-buttons-item">
            <div class="blcokly-action-buttons-item-icon">
                <svg style="transform: translateX(-0px);" xmlns='http://www.w3.org/2000/svg' width='20' height='20'
                    viewBox='0 0 24 24'>
                    <title>缩小工作区</title>
                    <g id="minimize_line" fill='none' fill-rule='evenodd'>
                        <path
                            d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z' />
                        <path fill='currentColor' d='M3 12a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1' />
                    </g>

                </svg>
            </div>
            缩小
        </div>

    </div>

    <div id="n"></div>
    <script src="./js/renderer.js"></script>
    <script src="./js/multi-page-manager.js"></script>
    <script src="./js/custom-workspace-buttons.js"></script>
    <script src="./blocks/msg.js"></script>
    <script src="./blocks/get.js"></script>
    <script src="./blocks/get.js.js"></script>
    <script src="./blocks/workspace.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css"
        rel="stylesheet" />
    <script>
        // 配置Prism自动加载器
        Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';

        // 初始化语法高亮
        Prism.highlightAll();
    </script>
    <script>
        // 下拉菜单功能
        function toggleDropdown(button) {
            const dropdown = button.nextElementSibling;
            const allDropdowns = document.querySelectorAll('.dropdown-menu');

            // 关闭其他下拉菜单
            allDropdowns.forEach(d => {
                if (d !== dropdown) {
                    d.classList.remove('show');
                }
            });

            // 切换当前下拉菜单
            dropdown.classList.toggle('show');
        }

        // 点击外部关闭下拉菜单
        document.addEventListener('click', function (event) {
            if (!event.target.closest('.dropdown')) {
                document.querySelectorAll('.dropdown-menu').forEach(d => {
                    d.classList.remove('show');
                });
            }
        });

        // 主题切换功能
        function setTheme(color) {
            $.cookie("theme", color);
            $("#navbar").css("background-color", color);
            $(".navbar").css("background-color", color);

            // 切换深色模式
            const isDarkMode = color === "#494949";

            // 页面背景色
            document.body.style.backgroundColor = isDarkMode ? '#1e1e1e' : '#ffffff';
            document.body.style.color = isDarkMode ? '#ffffff' : '#000000';
            // 修复header选择器并添加空值检查
            const headerElements = document.getElementsByClassName('navbar');
            if (headerElements.length > 0) {
                headerElements[0].style.color = isDarkMode ? '#ffffff' : '#383838';
                headerElements[0].style.borderBottom = isDarkMode ? '1px solid #3d3d3d' : '1px solid #d4d4d4';
                headerElements[0].style.backgroundColor = isDarkMode ? '#3d3d3d !important' : '#ffffff';
            }

            const blocklyFlyout = document.getElementsByClassName('blocklyFlyout');
            console.log(blocklyFlyout);
            if (blocklyFlyout.length > 0) {
                blocklyFlyout[1].style.backgroundColor = isDarkMode ? '#2d2d2d' : '#ffffff';
            }

            const blcoklyActionButtons = document.getElementsByClassName('blcokly-action-buttons');
            const blcoklyActionButtonsItem = document.getElementsByClassName('blcokly-action-buttons-item');
            console.log(blcoklyActionButtons);
            if (blcoklyActionButtons.length > 0) {
                blcoklyActionButtons[0].style.backgroundColor = isDarkMode ? '#2d2d2d' : '#ffffff';
                blcoklyActionButtons[0].style.color = isDarkMode ? '#ffffff' : '#000000';
                for (let i = 0; i < blcoklyActionButtonsItem.length; i++) {
                    blcoklyActionButtonsItem[i].style.backgroundColor = isDarkMode ? '#2d2d2d' : '#ffffff';
                    blcoklyActionButtonsItem[i].style.color = isDarkMode ? '#ffffff' : '#000000';
                }
            }

            // 应用modal样式的函数
            function applyModalDarkModeStyles() {
                const modal = document.getElementsByClassName('complete-modal-content');
                if (modal.length > 0) {
                    for (let i = 0; i < modal.length; i++) {
                        modal[i].style.backgroundColor = isDarkMode ? '#2d2d2d' : '#ffffff';
                        modal[i].style.color = isDarkMode ? '#ffffff !important' : '#000000';
                    }
                }
            }
            
            // 首次应用样式
            applyModalDarkModeStyles();
            
            // 设置MutationObserver进行持续检测
            if (typeof MutationObserver !== 'undefined') {
                // 确保只创建一个observer实例
                if (!window.modalDarkModeObserver) {
                    window.modalDarkModeObserver = new MutationObserver(function(mutations) {
                        mutations.forEach(function(mutation) {
                            // 检查是否有新的complete-modal-content元素添加
                            if (mutation.addedNodes.length > 0) {
                                for (let i = 0; i < mutation.addedNodes.length; i++) {
                                    const node = mutation.addedNodes[i];
                                    if (node.classList && node.classList.contains('complete-modal-content')) {
                                        applyModalDarkModeStyles();
                                        break;
                                    }
                                    // 检查子节点
                                    if (node.querySelectorAll) {
                                        const childModals = node.querySelectorAll('.complete-modal-content');
                                        if (childModals.length > 0) {
                                            applyModalDarkModeStyles();
                                            break;
                                        }
                                    }
                                }
                            }
                        });
                    });
                    
                    // 监听整个文档的变化
                    window.modalDarkModeObserver.observe(document.body, {
                        childList: true,
                        subtree: true
                    });
                }
            }
            // 代码区域
            const codeElement = document.getElementById('code');
            if (codeElement) {
                codeElement.style.backgroundColor = isDarkMode ? '#2d2d2d' : '#f8f8f8';
                codeElement.style.color = isDarkMode ? '#ffffff' : '#000000';
            }

            // 对话框样式
            const dialogs = document.querySelectorAll('dialog, .modal');
            dialogs.forEach(dialog => {
                dialog.style.backgroundColor = isDarkMode ? '#2d2d2d' : '#ffffff';
                dialog.style.color = isDarkMode ? '#ffffff' : '#000000';
            });

            // 按钮样式
            const buttons = document.querySelectorAll('button, .btn');
            buttons.forEach(button => {
                if (!button.classList.contains('btn-primary')) {
                    button.style.backgroundColor = isDarkMode ? '#494949' : '#ffffff';
                    button.style.color = isDarkMode ? '#ffffff' : '#000000';
                    button.style.borderColor = isDarkMode ? '#5d5d5d' : '#e5e7eb';
                }
            });

            // 输入框样式
            const inputs = document.querySelectorAll('input, textarea, select');
            inputs.forEach(input => {
                input.style.backgroundColor = isDarkMode ? '#3d3d3d' : '#ffffff';
                input.style.color = isDarkMode ? '#ffffff' : '#000000';
                input.style.borderColor = isDarkMode ? '#5d5d5d' : '#e5e7eb';
            });

            // 下拉菜单
            const dropdowns = document.querySelectorAll('.dropdown-menu');
            dropdowns.forEach(dropdown => {
                dropdown.style.backgroundColor = isDarkMode ? '#2d2d2d' : '#ffffff';
                dropdown.style.color = isDarkMode ? '#ffffff' : '#000000';
                dropdown.style.borderColor = isDarkMode ? '#5d5d5d' : '#e5e7eb';
            });

            const dropdownitem = document.querySelectorAll('.navbar li a');
            console.log(dropdownitem);
            dropdownitem.forEach(dropdownitem => {
                dropdownitem.style.color = isDarkMode ? '#ffffff' : '#000000';
            });

            try {
                const blocklyDiv = document.getElementById('blocklyDiv');
                if (blocklyDiv) {
                    const mainBackground = blocklyDiv.querySelector('.blocklyMainBackground');
                    const toolboxDiv = blocklyDiv.querySelector('.blocklyToolboxDiv');

                    if (mainBackground) {
                        mainBackground.style.fill = color === "#494949" ? '#1f1f1f' : '#f2f3f7';
                    }

                    if (toolboxDiv) {
                        toolboxDiv.style.backgroundColor = color === "#494949" ? '#2d2d2d' : '#fff';
                        toolboxDiv.style.borderRight =  isDarkMode ? '1px solid #616161' : '1px solid #e5e7eb';
                    }
                }
            } catch (e) {
                console.warn('Blockly元素未找到，主题设置部分生效');
            }

            // 为codemao-renderer元素添加或移除dark-theme类
            const codemaoRenderer = document.querySelector('.codemao-renderer');
            if (codemaoRenderer) {
                if (isDarkMode) {
                    codemaoRenderer.classList.add('dark-theme');
                } else {
                    codemaoRenderer.classList.remove('dark-theme');
                }
            }

            // 关闭主题选择器
            $('#box-parent').hide();
        }

        // 深色模式切换
        function moon() {
            if ($.cookie("theme") != "#494949") {
                setTheme("#494949");
            } else {
                setTheme("#ffffff");
            }
        }

        // 代码高亮主题切换函数
        function changePrismTheme(themeName) {
            const themeLink = document.getElementById('prism-theme');
            let themeUrl;

            switch (themeName) {
                case 'default':
                    themeUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css';
                    break;
                case 'tomorrow':
                    themeUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css';
                    break;
                case 'twilight':
                    themeUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css';
                    break;
                case 'vs':
                    themeUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-vs.min.css';
                    break;
                case 'okaidia':
                default:
                    themeUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css';
                    break;
            }

            themeLink.href = themeUrl;

            // 保存主题选择
            $.cookie("prism-theme", themeName);

            // 重新应用语法高亮
            setTimeout(() => {
                if (typeof Prism !== 'undefined') {
                    Prism.highlightAll();
                }
            }, 100);

            $.growl.notice({
                title: "主题切换",
                message: `代码高亮主题已切换为: ${themeName}`,
                duration: 3000,
            });
        }

        // 初始化主题
        $(document).ready(function () {
            const savedTheme = $.cookie("theme") || "#ffffff";
            setTheme(savedTheme);

            // 初始化代码高亮主题
            const savedPrismTheme = $.cookie("prism-theme") || "okaidia";
            changePrismTheme(savedPrismTheme);
            /*
            // 初始化多页面功能
            if (typeof MultiPageManager !== 'undefined') {
                window.multiPageManager = new MultiPageManager();
                
                // 绑定多页面切换按钮
                $('#multi-page-toggle').on('click', function() {
                    window.multiPageManager.toggleMultiPageMode();
                });
            }
                */
        });
    </script>
</body>

</html>